window.addEventListener('scroll', function () {
  const part2 = document.querySelector('.part2')
  const dh = document.querySelector('#dh');
  //导航栏距离顶部的距离
  //let dh_length = 460
  let part2_length = part2.offsetTop
  // console.log(document.documentElement.scrollTop);
  // console.log(dh_length)
  //如果页面滚动的距离大于导航栏到顶部的距离，就固定
  if (document.documentElement.scrollTop >= part2_length) {
    dh.classList.add('fixed')

  } else {
    dh.classList.remove('fixed')
  }
})
//为每一个li添加一个点击事件
let listitems = document.querySelectorAll('.con-nav li')
for (let i = 0; i < listitems.length; i++) {
  listitems[i].addEventListener("click", function (e) {
    //console.log(e.target.dataset.name)
    //通过自定义属性，找到对应的大盒子
    let top = document.querySelector(`.par${e.target.dataset.name}`).offsetTop;

    document.documentElement.scrollTop = top;
  })
}

// 返回顶部
let backtop = document.querySelector('.backtop')
// 一. 页面滚动事件
window.addEventListener('scroll', function () {
  // 2. 页面检测滚动的距离
  let num = document.documentElement.scrollTop
  // 3. 进行判断显示和隐藏
  if (num >= 2000) {
    //显示那个元素
    backtop.style.display = 'block'
  } else {
    // 否则隐藏元素
    backtop.style.display = 'none'

  }

})
// 二、点击链接返回顶部 
backtop.addEventListener('click', function () {
  // 返回顶部
  // scrollTop 可读写
  document.documentElement.scrollTop = 0
})
